(function() {
if (document.readyState !== 'loading') {
    init();
} else {
    document.addEventListener('DOMContentLoaded', init);
}

function init() {
  const tabId = 'user_group_mgr';
  let container = document.querySelector(`[data-tab-id="${tabId}"]`);
  let $container = $(container);
  const url = `${ window.location.origin}/acc/rbac/permission/`
  const tableLabel = '.user_group_mgr_son'

  // 直接解析原生JSON
  let users_perm = JSON.parse(container.querySelector('#usersData').textContent);
  let groups_perm = JSON.parse(container.querySelector('#groupsData').textContent);
  let permissions_perm = JSON.parse(container.querySelector('#permissionsData').textContent);
  let currentUser = null;

  const headers = {
    'Authorization': 'Bearer ' + localStorage.getItem('access'),
    'Content-Type': 'application/json',
  }

  // 在所有Tab页面创建相同的频道
  const bc = new BroadcastChannel('data_update_channel');

  // 0.监听其他Tab的消息
  bc.addEventListener('message', (event) => {
    if (event.data.type === 'data_updated') {
      updateLocalData(event.data.payload);
    }
  });

  // 1.监听器
  container.addEventListener('click', function (e) {
    // 1-1.用户监听: 自动勾上组->自动勾上权限(就是加载原先已有的权限)
    if (e.target.closest('.user-item')) {
      const element = e.target.closest('.user-item');
      const userIndex = element.getAttribute('data-user-id');
      // 切换选中状态
      container.querySelectorAll('.user-item').forEach(item => {
        item.classList.remove('active-user');
      });
      element.classList.add('active-user');
      currentUser = userIndex;
      // 加载关联数据
      loadSelections(userIndex);
    }

    // 1-2.权限监听:复选框被点击时,如果是组权限,则显示提示是否是组权限,组权限则不让修改
    if (e.target.closest('#scroll-container')) {
      if (!currentUser) {
        e.target.checked = !e.target.checked;
        // showWarningModal('还未选中用户');
          showToast('还未选中用户', 'warning');
        return
      }
      if (users_perm[currentUser].is_superuser) {
        e.target.checked = !e.target.checked;
        // showWarningModal('此用户为超级用户, 若需改他权限, 请先降低他的权限等级');
          showToast('此用户为超级用户, 若需改他权限, 请先降低他的权限等级', 'warning');
        return
      }
      if (e.target.matches('.perm-checkbox-1, .perm-checkbox-2, .perm-checkbox-3')) {
        if (e.target.dataset.displayToggle === 'group_repeat_permissions') {
          e.preventDefault(); // 阻止状态改变
          // showWarningModal('此值属于组权限，若要修改，请到[组权分配]里修改');
            showToast('此值属于组权限，若要修改，请到[组权分配]里修改', 'warning');
        }
      }
    }

    // 1-12.分页功能  // 创建容器级jQuery对象
    if (e.target.closest('.pagination-btn')) {
        e.preventDefault();
        paging(e, container, url, tableLabel)  // 导入的函数
        //
        // // 获取容器作用域内的按钮
        // const $btn = $container.find(e.target.closest('.pagination-btn'));
        //
        // // 使用上下文参数限定作用域
        // const action = $btn.data('action');
        // // 容器内获取分页数据
        // const currentPage = parseInt($container.find('#current-page-display').text());
        // const totalPages = parseInt($container.find('#total-pages-display').text());
        // const keyw = container.querySelector('#userSearch')
        // const keyword = keyw ? keyw.value.trim() : ''
        //
        // let newPage = currentPage;
        // if (action === 'prev' && currentPage > 1) newPage = currentPage - 1;
        // if (action === 'next' && currentPage < totalPages) newPage = currentPage + 1;
        // if (newPage !== currentPage) {
        //     loadPage(newPage, keyword, $container);
        // }
    }

    // 1-13.分页里的跳转按钮
    if (e.target.closest('#page-jump-btn')) {
        pagingJump(container, url, tableLabel)
        //
        // // 获取容器作用域内的按钮
        // // const $btn = $container.find(e.target.closest('#page-jump-btn'));
        //
        // const targetPage = parseInt($container.find('#page-jump-input').val());
        // const totalPages = parseInt($container.find('#total-pages-display').text());
        // const keyw = container.querySelector('#userSearch')
        // const keyword = keyw ? keyw.value.trim() : ''
        //
        // if (targetPage && targetPage >= 1 && targetPage <= totalPages) {
        //     loadPage(targetPage, keyword, $container);
        // } else {
        //     // 输入验证提示
        //     const toast = `<div class="toast align-items-center text-white bg-danger border-0 position-fixed bottom-0 end-50 m-3" role="alert">
        //         <div class="d-flex">
        //             <div class="toast-body">请输入 1-${totalPages} 之间的有效页码</div>
        //             <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        //         </div>
        //     </div>`;
        //
        //    $container.append(toast);
        //    $container.find('.toast').toast('show');
        //     // $('.toast').toast('show');
        //     setTimeout(() => $('.toast').toast('hide').remove(), 3000);
        // }
    }

    // 13-1 回车键跳转支持
    $container.on('keypress', '#page-jump-input', function(e) {
      if (e.which === 13) {
          $container.find('#page-jump-btn').trigger('click');
      }
    });

    // 15-1 确认配置
    if (e.target.closest('#confirmBtn')){
        // 获取被选中用户id
        const userID = users_perm[currentUser]?.id || null
        if (!userID){showToast('还未选中用户,保存无效', 'warning'); return;}
        // 获取所有选中的多选框元素(组)
        const checkedCheckboxes = container.querySelectorAll('.group-checkbox:checked');
        // 提取选中值(组)
        const groupIDs = Array.from(checkedCheckboxes).map(checkbox => checkbox.value);
        // 获取所有选中的多选框元素(权限),并且过滤出直接权限
        const checkedPerms = container.querySelectorAll(
    '.perm-checkbox-1:checked[data-display-toggle="group_permissions"], ' +
            '.perm-checkbox-1:checked[data-display-toggle=""], ' +
            '.perm-checkbox-2:checked[data-display-toggle="group_permissions"], ' +
            '.perm-checkbox-2:checked[data-display-toggle=""], ' +
            '.perm-checkbox-3:checked[data-display-toggle="group_permissions"], ' +
            '.perm-checkbox-3:checked[data-display-toggle=""]'
        );

        // 提取选中值id(直接权限)
        const permissionIDs = Array.from(checkedPerms).map(checkbox => checkbox.id.split('_')[1]);

        // 健壮性检查：确保 permissionIDs 和 groupIDs 已定义,可以所有权限清空保存
        // if ((!permissionIDs || permissionIDs.length === 0) &&
        //     (!groupIDs || groupIDs.length === 0)) {
        //     showWarningModal('未给用户配置权限，保存无效');
        //     return;
        // }

        // 调用保存函数
        saveUserPermissions(userID, groupIDs, permissionIDs).then();

    }

  });


  // 15-1-1 权限配置保存至后端
  async function saveUserPermissions(userID, groupIDs, permissionIDs) {
    // 1. 构造请求数据
    const payload = {
        userID: userID,
        groupIDs: groupIDs || [],  // 处理空值情况
        permissionIDs: permissionIDs || []
    };
    headers['CSRFToken'] = getCSRFToken()
    try {
        // 2. 发送Fetch请求
        const response = await fetch('/acc/rbac/save_user_permissions/', {
            method: 'POST',
            credentials: 'include',  // 包含cookie确保会话一致
            headers: headers,
            body: JSON.stringify(payload)  // 序列化数据
        });

        // 3. 处理响应
        if (!response.ok) {
            throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }

        const result = await response.json();

        // 4. 处理业务逻辑结果
        if (result.success) {
            showToast('保存成功', 'success')
            // 查找并更新
            const userToUpdate = users_perm.find(user => user.id === result.userID);
            if (userToUpdate) {
              // 更新属性
              userToUpdate.groups = result.groups;
              userToUpdate.direct_permissions = result.direct_permissions;
              userToUpdate.group_permissions = result.group_permissions;
              userToUpdate.permissions = result.permissions;
            }
            // 通知其他tab页面,也同时更新
            bc.postMessage({
                type: 'data_updated',
                payload: {"user_group_mgr": userToUpdate}
            });

        } else {
            showToast('保存失败:' + result.error, 'error')
        }
    } catch (error) {
        showToast('请求异常:' + error, "error")
    }
  }

  // 15-1-2 获取CSRF Token的函数
  function getCSRFToken() {
      // 优先取cookie中的csrftoken,若没有则取标签<meta name="csrf-token" content="...">里的csrftoken
      const csrftoken = document.cookie.match(/csrftoken=([^;]+)/)?.[1]
          || document.querySelector('meta[name="csrf-token"]')?.content;
      return csrftoken || '';
  }


  // 14-2 搜索用户名(输入框回车时)
  $container.on('keypress', '#userSearch', function(e){
        if (e.which === 13) {
          e.preventDefault();
          executeSearch()
        }
    });

  // 14-3 搜索用户名()
  function executeSearch() {
        const keyw = container.querySelector('#userSearch')
        const keyword = keyw ? keyw.value.trim() : ''
        // loadPage(1, keyword, $container)
        loadPages(1, keyword, '', $container, url, tableLabel)
      }


  // 0-1 同步其他tab页面的数据
  function updateLocalData(data) {
    // 0-1-1.组权分配过来的组权限
    if (data.groups_perm) {
      groups_perm = data.groups_perm
      refreshGroupList(groups_perm)  // 刷新第二栏:组
      updateUserPermissionsDirectly(users_perm, groups_perm)  // 更新users_perm里的(组权限codename)和(所有权限name)
    }
    // 0-1-2.用户管理过来的(新增用户)
    if (data.user_perm_new) {
      // 把新增用户加到本地users最前面[0]位置
      users_perm.unshift(data.user_perm_new);
      refreshUserList(users_perm)  // 刷新第一栏:用户
    }
    // 0-1-3.用户管理过来的(行编辑用户)
    if (data.user_perm_edit) {
      // 把更新用户替换到本地users相同位置
      users_perm = users_perm.map(user =>
          parseInt(user.id) === parseInt(data.user_perm_edit.id) ? data.user_perm_edit : user
      );
      // refreshUserList(users_perm)  // 刷新第一栏:用户(更新用户不用刷新)
    }

    // 0-1-4 用户管理过来的(删除用户)
    if (data.user_delete_id) {
      // 把删除的用户从本地users里删除掉
      users_perm = users_perm.filter(user => parseInt(user.id) !== parseInt(data.user_delete_id));
      refreshUserList(users_perm)  // 刷新第一栏:用户
    }

  }

  // 0-1-1-1 更新users_perm里的(组权限codename)和(所有权限name)
  function updateUserPermissionsDirectly(users_perm, groups_perm) {
    // 遍历每个用户并直接更新其属性
    users_perm.forEach(user => {
        // 创建临时容器存储权限信息
        const groupPermissions = []; // 存储codename（不去重）
        const permissionNames = new Set(); // 存储name（自动去重）

        // 1.遍历用户直接权限,取出name
        user.direct_permissions.forEach(direct => {
            if (direct[2]) {
                permissionNames.add(direct[2]);
            }
        })

        // 2.遍历用户所属的所有组
        user.groups.forEach(group => {
            const groupId = group[0]; // 获取组ID

            // 在groups_perm中查找匹配的组
            const matchedGroup = groups_perm.find(g => g.id === groupId);

            if (matchedGroup) {
                // 处理该组的所有权限
                matchedGroup.permissions.forEach(permission => {
                    // 提取并添加codename（权限项的第1个元素）
                    if (permission[1]) {
                        groupPermissions.push(permission[1]);
                    }

                    // 提取并添加name（权限项的第2个元素）
                    if (permission[2]) {
                        permissionNames.add(permission[2]);
                    }
                });
            }
        });

        // 直接更新用户对象的属性
        user.group_permissions = groupPermissions;
        user.permissions = Array.from(permissionNames); // 将Set转换为数组
    });
  }


  // 1-1.1 加载关联数据
  function loadSelections(userIndex) {
    // 更换用户先清空勾选项(清空组权限)
    container.querySelectorAll('.group-checkbox').forEach(checkbox => {
      checkbox.checked = false;
    })
    const selectors = ['.perm-checkbox-1', '.perm-checkbox-2', '.perm-checkbox-3'];
    // 遍历每个选择器并执行重置操作(清空权限选项)
    selectors.forEach(selector => {
      container.querySelectorAll(selector).forEach(checkbox => {
        checkbox.checked = false;
        checkbox.dataset.displayToggle = '';
        checkbox.style.backgroundColor = '';
      });
    });

    // 勾选组
    container.querySelectorAll('.group-checkbox').forEach(checkbox => {
      users_perm[userIndex].groups.forEach(group => {
        if (!checkbox.checked) {
          checkbox.checked = group[0].toString() === checkbox.value;
        }
      });
    });

    // 勾选直接权限
    selectors.forEach((selector, index) => {
      users_perm[userIndex].direct_permissions.forEach(perm => {
        container.querySelectorAll(selector).forEach(checkbox => {
          if (!checkbox.checked) {
            const permParts = perm[1].split('.').slice(0, index + 1).join('.');
            if (permParts === checkbox.value) {
              checkbox.checked = true;
              checkbox.dataset.displayToggle = 'group_permissions';
            }
          }
        })
      });
    });
    // 勾选组权限
    modifyGroupsPerm(users_perm[userIndex].group_permissions);
  }

  // 2.组选择监听:组有改变则同时修改权限选择框
  container.addEventListener('change', function (e) {
    if (e.target.closest('#groupList')) {
        if (!currentUser) {
            e.target.checked = !e.target.checked;
            showToast('还未选中用户', 'warning');
            return
        }
        if (users_perm[currentUser].is_superuser) {
            e.target.checked = !e.target.checked;
            showToast('此用户为超级用户, 若需改他权限, 请先降低他的权限等级', 'warning');
            return
        }
        // 获取所有 name 为 "groupList" 的选中复选框
        const selectedCheckboxes = container.querySelectorAll('input[name="groupList"]:checked');
        const selectedValues = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);
        // 取到所有被选择组的权限(不用去重)
        const group_perm2 = selectedValues.flatMap(select =>
            groups_perm.find(group => group.id === parseInt(select)).permissions.map(perm => perm[1])
        );
        // 修改关联的组权限
        modifyGroupsPerm(group_perm2);
        return true;
    }
  });

  // 2-1.修改关联的组权限
  function modifyGroupsPerm(group_permissions) {
    // 所有权限相关的input元素，并提取它们的value属性值
    const inputs = container.querySelectorAll('.perm-checkbox-1, .perm-checkbox-2, .perm-checkbox-3');
    // 定位到value=value的选择框
    inputs.forEach(checkbox => {

      if (checkbox.dataset.displayToggle === 'group_permissions') {
        return
      } // 如果已是直接权限,就返回

      let count = group_permissions.filter(item => item === checkbox.value).length;  // 检查完全匹配的总共有几个

      if (count === 0) {
        checkbox.checked = false;
        checkbox.style.backgroundColor = '';
        checkbox.dataset.displayToggle = '';
      }

      if (count === 1) {
        checkbox.checked = true;
        checkbox.style.backgroundColor = '#90CAF9';
        checkbox.dataset.displayToggle = 'group_repeat_permissions';

        let a = checkbox.value.split('.').slice(0, checkbox.value.split('.').length - 1).join('.')
        const check = container.querySelector(`input[value="${a}"]`);
        if (check) {
          check.checked = true;
          check.style.backgroundColor = '#90CAF9';
          check.dataset.displayToggle = 'group_repeat_permissions';
        }
      }

      if (count > 1) {
        checkbox.checked = true;
        checkbox.style.backgroundColor = '#BB4444';
        checkbox.dataset.displayToggle = 'group_repeat_permissions';

        let a = checkbox.value.split('.').slice(0, checkbox.value.split('.').length - 1).join('.')
        const check = container.querySelector(`input[value="${a}"]`);
        if (check) {
          check.checked = true;
          check.style.backgroundColor = '#BB4444';
          check.dataset.displayToggle = 'group_repeat_permissions';
        }
      }


    });
  }

  // 3.显示小模态框时触发自动关闭
  // function showWarningModal(message) {
  //   // 显示模态框
  //   const modalEl = container.querySelector('#warningModal_mgr');
  //   const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
  //
  //   container.querySelector('#dynamicMessage_mgr').textContent = message
  //   modal.show()
  //   // 5秒自动关闭
  //   setTimeout(() => {
  //     modal.hide()
  //   }, 5000);
  //   // 点击任意位置关闭
  //   modalEl.addEventListener('click', () => {
  //     modal.hide()
  //   });
  //
  // }

  // 4.如果其他tab页(组权分配)有组变化,则执行
  function refreshGroupList(newGroups) {
    const cont = container.querySelector('#groupList');
    cont.innerHTML = newGroups.map(group => `
      <div class="list-group-item d-flex align-items-center">
        <div class="form-check flex-grow-1">
          <input type="checkbox" class="form-check-input group-checkbox" 
                 value="${group.id}" id="group_${group.id}" name="groupList">
          <label class="form-check-label" for="group_${group.id}">
            <span class="badge bg-success me-2 btn-sm">组</span>
            ${group.name}
          </label>
        </div>
      </div>
    `).join('');
  }


  // 5. 如果其他tab页(用户管理)有用户变化,则执行
  function refreshUserList(newUsers) {
    // 获取列表容器
    const cont = container.querySelector('#userList');

    // 清空现有内容
    cont.innerHTML = '';

    // 生成新用户列表HTML
    let htmlContent = '';
    newUsers.forEach((user, index) => {
      htmlContent += `
        <div class="list-group-item d-flex align-items-center user-item"
             data-user-id="${index}"
             style="white-space: nowrap; overflow-x: hidden; font-size: calc(1rem * 0.95);">
          <div class="flex-grow-1">
            <div class="d-flex align-items-center">
              <span class="badge bg-primary me-2">用户</span>
              <div>
                <div class="fw-bold" title="${user.username} ${user.phone}">
                  ${user.username} 
                  <small class="text-muted">${user.phone}</small>
                </div>
              </div>
            </div>
          </div>
          <i class="bi bi-check2-circle text-primary ms-2"></i>
        </div>
      `;
    });
    // 插入新内容
    cont.innerHTML = htmlContent;
    // 添加刷新效果（可选）
    cont.classList.add('refreshing');
    setTimeout(() => cont.classList.remove('refreshing'), 300);
  }

  // 12-1 加载指定页数据
  // function loadPage(page, keyword, $container) {
  //     // 显示加载状态
  //     const loadingToast = `<div class="toast align-items-center text-white bg-primary border-0 position-fixed bottom-0 end-0 m-3" role="status">
  //         <div class="d-flex">
  //             <div class="toast-body">正在加载第 ${page} 页数据...</div>
  //             <div class="spinner-border spinner-border-sm text-light me-2 m-auto"></div>
  //         </div>
  //     </div>`;
  //
  //     $container.append(loadingToast);
  //     $container.find('.toast').toast('show');
  //     // $('.toast').toast('show');
  //
  //     // AJAX请求数据 window.location.pathname
  //     const API_BASE = window.location.origin;
  //     // headers['X-Requested-With'] = 'XMLHttpRequest'
  //     $.ajax({
  //         url: `${API_BASE}/acc/rbac/permission/`,
  //         type: 'GET',
  //         data:{is_ajax: '1', page: page, keyword },
  //         headers: { "X-Requested-With": 'XMLHttpRequest' },
  //         success: function(response) {
  //             // 分页后,更新最新的数据
  //             permissions_perm = response.context.permissions
  //             users_perm = response.context.users
  //             groups_perm = response.context.groups
  //             currentUser = null;
  //
  //             // 更新表格内容
  //             $container.find('.user_group_mgr_son').html(response.table_html);
  //
  //             // 更新分页信息
  //             $container.find('#current-page-display').text(response.pagination.current_page);
  //             $container.find('#total-pages-display').text(response.pagination.total_pages);
  //             $container.find('#total-pages').text(response.pagination.total_pages);
  //             $container.find('#total-items').text(response.pagination.total_items);
  //
  //             // 更新按钮状态
  //             $container.find('[data-action="prev"]')
  //                 .prop('disabled', !response.pagination.has_prev)
  //                 .toggleClass('disabled', !response.pagination.has_prev);
  //             $container.find('[data-action="next"]')
  //                 .prop('disabled', !response.pagination.has_next)
  //                 .toggleClass('disabled', !response.pagination.has_next);
  //
  //             // 更新输入框范围
  //             $container.find('#page-jump-input')
  //                 .attr('max', response.pagination.total_pages)
  //                 .val('');
  //             // 更新搜索框
  //             $container.find('#userSearch').val(keyword)
  //             // 显示成功提示
  //             const successToast = `<div class="toast align-items-center text-white bg-success border-0 position-fixed bottom-0 end-0 m-3" role="alert">
  //                 <div class="d-flex">
  //                     <div class="toast-body">已加载第 ${page} 页数据</div>
  //                     <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  //                 </div>
  //             </div>`;
  //
  //             $container.append(successToast);
  //             $container.find('.toast').toast('show');
  //             // $('.toast').toast('show');
  //             setTimeout(() => $('.toast').toast('hide').remove(), 2000);},
  //
  //         error: function(xhr) {
  //             console.error("分页加载错误:", xhr.statusText);
  //             const errorToast = `<div class="toast align-items-center text-white bg-danger border-0 position-fixed bottom-0 end-0 m-3" role="alert">
  //                 <div class="d-flex">
  //                     <div class="toast-body">数据加载失败，请重试</div>
  //                     <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  //                 </div>
  //             </div>`;
  //
  //             $container.append(errorToast);
  //             $container.find('.toast').toast('show');
  //             setTimeout(() => $('.toast').toast('hide').remove(), 3000);},
  //         complete: function() {
  //             // 移除加载提示
  //             $container.find('.toast').toast('hide').remove();
  //         }
  //     });
  // }



}
})();